<template>
  <!-- 头部 -->
  <div class="header">
    <div class="header-item">
      <a
        @click="isSwitch(1)"
        :class="{box: isShow}"
        href="JavaScript:;"
      >支出</a>
      <a
        @click="isSwitch(2)"
        :class="{box: !isShow}"
        href="JavaScript:;"
      >收入</a>
    </div>
    <div
      @click="toCancel"
      class="header-item2"
    >
      取消
    </div>
  </div>
  <!-- 输入框 -->
  <div class="foot">
    <input
      v-model.number="obj.num"
      type="text"
    >
    <button @click="sendBills">
      {{ obj.title }}
    </button>
  </div>
</template>

<script setup>
import { ref, markRaw, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as dayjs from 'dayjs'
import { modifyBill } from '@/api/user'
import { setItem, getItem } from '@/utils/token'
import { v4 as uuidv4 } from 'uuid'

// 声明基本变量
const arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
const times = dayjs()

// 路由和控制支出和收入
const router = useRouter()
const isShow = ref(true)
const itemData = getItem('result')

// 单笔支出或收入数据
const obj = markRaw({
  id: uuidv4(),
  title: '支出',
  num: null
})

// 判断这一天是否存在
const countList = () => {
  // 储存时间
  const arr = reactive([])
  itemData.data.bills.forEach(item => {
    return arr.push(item.time)
  })
  // 判断是否为这一天
  if (arr.includes(times.format('YYYY-MM-DD'))) {
    bills.list = [...itemData.data.bills[0].list]
    return bills.list
  } else if (!arr.includes(times.format('YYYY-MM-DD'))) {
    return bills.list
  }
}
onMounted(countList)
// 一天时间中的支出与收入
const bills = {
  time: times.format('YYYY-MM-DD'),
  week: arr[times.day() - 1],
  income: null,
  expenditure: null,
  list: []
}

// 一个月的支出与收入
const Statistics = {
  expenditure: 0,
  income: 0,
  isShow: true,
  month: `0${times.month() + 1}`,
  surplus: 0
}

// 汇总用户数据
const data = {
  bills: [...itemData.data.bills],
  Statistics: {}
}

// 做出判断当前用户是否填写支出与收入
const isSwitch = (v) => {
  if (v === 1) {
    isShow.value = true
    obj.title = '支出'
  } else {
    isShow.value = false
    obj.title = '收入'
  }
}

// 点击确定进行相应的计算和对象合并操作
const sendBills = async () => {
  // 输入框不能为空，且为数字类型
  if (obj.num !== '' && typeof (obj.num) === 'number') {
    // 一天初始值
    bills.expenditure = 0
    bills.income = 0
    // 一个月初始值
    Statistics.expenditure = 0
    Statistics.income = 0
    // 合并单笔收入或支出
    bills.list.push({ id: uuidv4(), title: obj.title, num: obj.num })
    // 计算一天中收入或支出的值
    bills.list.forEach(item => {
      if (item.title === '支出') {
        bills.expenditure += item.num
      } else {
        bills.income += item.num
      }
    })
  }
}

const toCancel = async () => {
  // 合并一天中的收入与支出
  if (data.bills[0].time === times.format('YYYY-MM-DD')) {
    data.bills.shift()
    data.bills.push({ id: uuidv4(), time: bills.time, week: bills.week, income: bills.income, expenditure: bills.expenditure, list: bills.list })
  } else {
    data.bills.push({ id: uuidv4(), time: bills.time, week: bills.week, income: bills.income, expenditure: bills.expenditure, list: bills.list })
  }
  // 计算一个月中的支出与收入的值
  data.bills.forEach(item => {
    Statistics.expenditure += item.expenditure
    Statistics.income += item.income
  })
  // 汇总总数据
  Object.assign(data.Statistics, Statistics)
  const result = await modifyBill({ id: getItem('TOKEN').token, code: 200, data })
  if (result) {
    router.go(-1)
    // 存储数据
    setItem('result', result)
  }
}
</script>

<style lang="less" scoped>
.header{
    width: 100%;
    height: 50px;
    background-color: #8B658B;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .header-item{
        flex: 3;
        display: flex;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
        a{
         &:nth-child(1){
             margin-right: 25px;
         }
         height: 30px;
        }
        .box{
            border-bottom: 2px solid #000;
        }
    }
    .header-item2{
        font-size: 15px;
        padding-right: 15px;
    }
}
.foot{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    input{
        width: 200px;
        height: 30px;
        border: 1px #000 solid;
        font-size: 20px;
        padding: 0px 10px;
    }
    button{
        width: 50px;
        height: 25px;
        font-size: 15px;
        text-align: center;
        line-height: 25px;
        margin-left: 15px;
    }
}
</style>
